<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>区间</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入日期">
      <nz-range-picker formControlName="dateRange"
      ></nz-range-picker>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>年</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入日期">
      <nz-year-picker formControlName="dateYear"
      ></nz-year-picker>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>年月</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入日期">
      <nz-month-picker formControlName="dateMonth"
      ></nz-month-picker>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>周</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入日期">
      <nz-week-picker formControlName="dateWeek"
      ></nz-week-picker>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>年月日</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入日期">
      <nz-date-picker formControlName="date"></nz-date-picker>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24"  nzRequired>用户</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择用户!">
      <nz-select nzAllowClear nzPlaceHolder="请选择" formControlName="user">
        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
        <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid E-mail!">
      <input nz-input formControlName="email" id="email"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your password!">
      <input
        nz-input
        type="password"
        id="password"
        formControlName="password"
        (ngModelChange)="updateConfirmValidator()"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
      <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
      <ng-template #errorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please confirm your password!
        </ng-container>
        <ng-container *ngIf="control.hasError('confirm')">
          Two passwords that you enter is inconsistent!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
          <span>
            Nickname
            <i
              nz-icon
              nz-tooltip
              nzTitle="What do you want other to call you"
              nzType="question-circle"
              nzTheme="outline"
            ></i>
          </span>
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input your nickname!">
      <input nz-input id="nickname" formControlName="nickname" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>Phone Number</nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzXs]="24"
      [nzValidateStatus]="validateForm.controls['phoneNumber']"
      nzErrorTip="Please input your phone number!"
    >
      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
        <ng-template #addOnBeforeTemplate>
          <nz-select formControlName="phoneNumberPrefix" class="phone-select">
            <nz-option nzLabel="+86" nzValue="+86"></nz-option>
            <nz-option nzLabel="+87" nzValue="+87"></nz-option>
          </nz-select>
        </ng-template>
        <input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="website" nzRequired>Website</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="Please input website!">
      <input nz-input id="website" formControlName="website" placeholder="website" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzXs]="24"
      nzErrorTip="Please input the captcha you got!"
      nzExtra="We must make sure that your are a human."
    >
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="12">
          <input nz-input formControlName="captcha" id="captcha" />
        </div>
        <div nz-col [nzSpan]="12">
          <button nz-button (click)="getCaptcha($event)">Get captcha</button>
        </div>
      </div>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item nz-row class="register-area">
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <label nz-checkbox formControlName="agree">
        <span>I have read the <a>agreement</a></span>
      </label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row class="register-area">
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <button nz-button nzType="primary">Register</button>
    </nz-form-control>
  </nz-form-item>
</form>
